<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import TheNavBar from '../components/TheNavBar.vue';
import '../assets/memberStyles.css';

const router = useRouter();

// 用户会员信息
const user = ref({
  name: '用户',
  memberLevel: '普通用户',
  points: 0,
  balance: 0,
  expirationDate: null,
  avatar: '/src/assets/1.webp'
});

// 会员等级定义
const memberLevels = ref([
  {
    id: 'basic',
    name: '普通用户',
    color: 'text-gray-500',
    features: ['基础旅游推荐', '社区互动'],
    price: 0,
    period: 0
  },
  {
    id: 'silver',
    name: '银卡会员',
    color: 'text-gray-400',
    features: ['智能旅行定制', '优先客服', '9.5折优惠', '专属活动'],
    price: 99,
    period: 30
  },
  {
    id: 'gold',
    name: '金卡会员',
    color: 'text-amber-500',
    features: ['高级智能定制', '24小时客服', '9折优惠', '专属活动', '免费取消', 'VIP通道'],
    price: 199,
    period: 30
  },
  {
    id: 'platinum',
    name: '铂金会员',
    color: 'text-blue-400',
    features: ['顶级智能定制', '专属旅行顾问', '8.5折优惠', '所有专属活动', '无忧取消', '机场接送', '豪华住宿升级'],
    price: 399,
    period: 30
  }
]);

// 选中的会员套餐
const selectedPackage = ref(null);

// 充值金额选项
const rechargeAmounts = ref([50, 100, 200, 500, 1000]);
const customAmount = ref('');
const selectedAmount = ref(null);

// 智能定制旅行表单
const customTripForm = ref({
  destination: '',
  duration: '',
  travelers: 1,
  budget: '',
  interests: [],
  accommodation: '',
  transportation: ''
});

// 定制兴趣选项
const interestOptions = ref([
  '历史文化', '美食探索', '自然风光', '主题乐园', 
  '购物血拼', '艺术欣赏', '户外运动', '休闲度假'
]);

// 显示状态控制
const showMembershipSection = ref(true);
const showRechargeSection = ref(false);
const showCustomTripSection = ref(false);
const showPaymentModal = ref(false);
const showOrderSuccessModal = ref(false);
const showCustomTripResult = ref(false);

// 模拟的智能定制结果
const customTripResult = ref(null);

// 计算属性：是否可以使用智能定制功能
const canUseCustomTrip = computed(() => {
  return user.value.memberLevel !== '普通用户';
});

// 计算属性：用户到期日期的剩余天数
const daysRemaining = computed(() => {
  if (!user.value.expirationDate) return 0;
  const now = new Date();
  const expireDate = new Date(user.value.expirationDate);
  const diffTime = expireDate - now;
  return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
});

// 选择会员套餐
const selectMemberPackage = (pkg) => {
  selectedPackage.value = pkg;
};

// 选择充值金额
const selectRechargeAmount = (amount) => {
  selectedAmount.value = amount;
  customAmount.value = '';
};

// 处理自定义充值金额
const handleCustomAmount = () => {
  const amount = parseFloat(customAmount.value);
  if (!isNaN(amount) && amount > 0) {
    selectedAmount.value = amount;
  } else {
    alert('请输入有效的充值金额');
    customAmount.value = '';
    selectedAmount.value = null;
  }
};

// 打开支付弹窗
const openPaymentModal = () => {
  if (selectedPackage.value || selectedAmount.value) {
    showPaymentModal.value = true;
  } else {
    alert('请先选择套餐或充值金额');
  }
};

// 处理支付
const handlePayment = () => {
  // 模拟支付过程
  setTimeout(() => {
    showPaymentModal.value = false;
    
    if (selectedPackage.value) {
      // 会员购买成功
      user.value.memberLevel = selectedPackage.value.name;
      const now = new Date();
      now.setDate(now.getDate() + selectedPackage.value.period);
      user.value.expirationDate = now.toISOString();
      user.value.balance -= selectedPackage.value.price;
    } else if (selectedAmount.value) {
      // 充值成功
      user.value.balance += selectedAmount.value;
    }
    
    showOrderSuccessModal.value = true;
    
    // 重置选择
    selectedPackage.value = null;
    selectedAmount.value = null;
    customAmount.value = '';
  }, 1500);
};

// 提交智能定制表单
const submitCustomTripForm = () => {
  // 验证表单
  if (!customTripForm.value.destination || !customTripForm.value.duration || !customTripForm.value.budget) {
    alert('请填写必填字段');
    return;
  }
  
  // 模拟智能定制过程
  setTimeout(() => {
    // 生成模拟的定制结果
    customTripResult.value = {
      destination: customTripForm.value.destination,
      duration: customTripForm.value.duration,
      travelers: customTripForm.value.travelers,
      budget: customTripForm.value.budget,
      days: generateItinerary(customTripForm.value.destination, parseInt(customTripForm.value.duration)),
      recommendation: `根据您的兴趣偏好，我们为您精心定制了${customTripForm.value.destination}的${customTripForm.value.duration}天行程。这个行程充分结合了您选择的${customTripForm.value.interests.join('、')}等兴趣爱好，并根据您的预算提供了最合适的住宿和交通建议。`
    };
    
    showCustomTripResult.value = true;
  }, 2000);
};

// 生成模拟行程
const generateItinerary = (destination, days) => {
  const itinerary = [];
  
  for (let i = 1; i <= days; i++) {
    itinerary.push({
      day: i,
      morning: `${destination}景点游览`,
      afternoon: `当地特色体验`,
      evening: `自由活动/特色餐饮`,
      accommodation: '推荐当地精品酒店'
    });
  }
  
  return itinerary;
};

// 切换兴趣选择
const toggleInterest = (interest) => {
  const index = customTripForm.value.interests.indexOf(interest);
  if (index > -1) {
    customTripForm.value.interests.splice(index, 1);
  } else {
    customTripForm.value.interests.push(interest);
  }
};

// 切换显示区域
const showSection = (section) => {
  showMembershipSection.value = false;
  showRechargeSection.value = false;
  showCustomTripSection.value = false;
  showCustomTripResult.value = false;
  
  switch (section) {
    case 'membership':
      showMembershipSection.value = true;
      break;
    case 'recharge':
      showRechargeSection.value = true;
      break;
    case 'customTrip':
      showCustomTripSection.value = true;
      break;
  }
};
</script>

<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 font-sans">
    <!-- 导航栏 -->
    <TheNavBar />
    
    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
      <div class="max-w-6xl mx-auto">
        <!-- 返回首页按钮 -->
        <button 
          @click="router.push('/log')"
          class="mb-6 bg-primary text-white px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 hover:bg-primary/90 z-10"
        >
          <i class="fa fa-arrow-left mr-1"></i> 返回首页
        </button>
        <!-- 用户信息卡片 -->
        <div class="bg-white rounded-2xl shadow-lg p-6 mb-8 transition-all duration-300 hover:shadow-xl">
          <div class="flex flex-col md:flex-row items-center justify-between">
            <div class="flex items-center mb-4 md:mb-0">
              <img :src="user.avatar" alt="用户头像" class="w-16 h-16 rounded-full object-cover border-4 border-primary">
              <div class="ml-4">
                <h2 class="text-2xl font-bold text-gray-800">欢迎回来，{{ user.name }}</h2>
                <div class="flex items-center mt-1">
                  <span class="text-sm font-medium px-2 py-1 rounded-full bg-primary/10" :class="user.memberLevel === '普通用户' ? 'text-gray-500' : 
                                                                              user.memberLevel === '银卡会员' ? 'text-gray-400' : 
                                                                              user.memberLevel === '金卡会员' ? 'text-amber-500' : 'text-blue-400'">
                    {{ user.memberLevel }}
                  </span>
                  <span v-if="user.memberLevel !== '普通用户'" class="ml-3 text-sm text-gray-500">
                    有效期还剩 {{ daysRemaining }} 天
                  </span>
                </div>
              </div>
            </div>
            
            <div class="flex space-x-4">
              <div class="bg-gray-50 rounded-xl p-3 text-center min-w-[100px]">
                <p class="text-sm text-gray-500">账户余额</p>
                <p class="text-xl font-bold text-gray-800">¥{{ user.balance }}</p>
              </div>
              <div class="bg-gray-50 rounded-xl p-3 text-center min-w-[100px]">
                <p class="text-sm text-gray-500">积分</p>
                <p class="text-xl font-bold text-gray-800">{{ user.points }}</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 功能选项卡 -->
        <div class="bg-white rounded-2xl shadow-lg mb-8 overflow-hidden">
          <div class="flex border-b">
            <button 
              @click="showSection('membership')" 
              class="flex-1 py-4 px-6 text-center font-medium transition-colors duration-200"
              :class="showMembershipSection ? 'border-b-2 border-primary text-primary' : 'text-gray-600 hover:bg-gray-50'"
            >
              会员套餐
            </button>
            <button 
              @click="showSection('recharge')" 
              class="flex-1 py-4 px-6 text-center font-medium transition-colors duration-200"
              :class="showRechargeSection ? 'border-b-2 border-primary text-primary' : 'text-gray-600 hover:bg-gray-50'"
            >
              账户充值
            </button>
            <button 
              @click="showSection('customTrip')" 
              class="flex-1 py-4 px-6 text-center font-medium transition-colors duration-200"
              :class="showCustomTripSection || showCustomTripResult ? 'border-b-2 border-primary text-primary' : 'text-gray-600 hover:bg-gray-50'"
              :disabled="!canUseCustomTrip"
              :style="{ opacity: canUseCustomTrip ? 1 : 0.6, cursor: canUseCustomTrip ? 'pointer' : 'not-allowed' }"
            >
              智能旅行定制
              <span v-if="!canUseCustomTrip" class="ml-1 text-xs text-gray-500">会员专享</span>
            </button>
          </div>
          
          <!-- 会员套餐区域 -->
          <div v-show="showMembershipSection" class="p-6">
            <h3 class="text-xl font-bold mb-6 text-gray-800">选择会员套餐</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <div 
                v-for="level in memberLevels" 
                :key="level.id"
                class="border rounded-2xl p-6 transition-all duration-300 hover:shadow-lg cursor-pointer"
                :class="selectedPackage === level ? 'border-primary bg-primary/5' : 'border-gray-200 hover:border-primary/50'"
                @click="selectMemberPackage(level)"
              >
                <div class="flex justify-between items-center mb-4">
                  <h4 class="text-lg font-bold" :class="level.color">{{ level.name }}</h4>
                  <div v-if="user.memberLevel === level.name" class="px-2 py-1 bg-green-50 text-green-600 rounded-full text-xs font-medium">
                    当前等级
                  </div>
                </div>
                
                <div v-if="level.price > 0" class="mb-4">
                  <span class="text-3xl font-bold text-gray-800">¥{{ level.price }}</span>
                  <span class="text-gray-500">/{{ level.period }}天</span>
                </div>
                <div v-else class="mb-4 text-3xl font-bold text-gray-800">免费</div>
                
                <ul class="space-y-2 mb-6">
                  <li v-for="(feature, index) in level.features" :key="index" class="flex items-start">
                    <i class="fa fa-check text-green-500 mt-1 mr-2"></i>
                    <span class="text-sm text-gray-600">{{ feature }}</span>
                  </li>
                </ul>
                
                <button 
                  class="w-full py-2 rounded-lg font-medium transition-all duration-200"
                  :class="user.memberLevel === level.name ? 
                    'bg-gray-200 text-gray-500 cursor-not-allowed' : 
                    (level.price > 0 ? 'bg-primary text-white hover:bg-primary/90' : 'bg-gray-100 text-gray-700 hover:bg-gray-200')"
                  :disabled="user.memberLevel === level.name"
                  @click.stop="openPaymentModal"
                >
                  {{ user.memberLevel === level.name ? '已开通' : (level.price > 0 ? '立即开通' : '当前等级') }}
                </button>
              </div>
            </div>
          </div>
          
          <!-- 账户充值区域 -->
          <div v-show="showRechargeSection" class="p-6">
            <h3 class="text-xl font-bold mb-6 text-gray-800">账户充值</h3>
            
            <div class="max-w-md">
              <div class="grid grid-cols-3 gap-4 mb-6">
                <button 
                  v-for="amount in rechargeAmounts" 
                  :key="amount"
                  class="border rounded-lg p-4 text-center transition-all duration-200 hover:shadow"
                  :class="selectedAmount === amount ? 'border-primary bg-primary/5 font-medium' : 'border-gray-200 hover:border-primary/50'"
                  @click="selectRechargeAmount(amount)"
                >
                  ¥{{ amount }}
                </button>
              </div>
              
              <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">其他金额</label>
                <div class="flex">
                  <span class="inline-flex items-center px-3 rounded-l-lg border border-r-0 border-gray-300 bg-gray-50 text-gray-500">¥</span>
                  <input 
                    type="number" 
                    v-model="customAmount"
                    @blur="handleCustomAmount"
                    class="flex-1 min-w-0 block w-full px-3 py-2 border border-gray-300 focus:ring-primary focus:border-primary rounded-r-lg transition-all"
                    placeholder="输入金额"
                    min="0"
                    step="0.01"
                  >
                </div>
              </div>
              
              <div class="bg-blue-50 rounded-lg p-4 mb-6">
                <p class="text-blue-700 text-sm">
                  <i class="fa fa-info-circle mr-1"></i>
                  充值成功后，您可以使用余额购买会员套餐或支付其他服务费用
                </p>
              </div>
              
              <button 
                class="w-full py-3 rounded-lg bg-primary text-white font-medium transition-all duration-200 hover:bg-primary/90 shadow hover:shadow-md"
                @click="openPaymentModal"
              >
                确认充值
              </button>
            </div>
          </div>
          
          <!-- 智能旅行定制区域 -->
          <div v-show="showCustomTripSection && !showCustomTripResult" class="p-6">
            <h3 class="text-xl font-bold mb-6 text-gray-800">智能旅行定制 (会员专享)</h3>
            
            <div class="max-w-2xl">
              <form @submit.prevent="submitCustomTripForm" class="space-y-6">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">目的地</label>
                  <input 
                    type="text" 
                    v-model="customTripForm.destination"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary transition-all"
                    placeholder="输入您想去的地方"
                    required
                  >
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">行程天数</label>
                    <input 
                      type="number" 
                      v-model="customTripForm.duration"
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary transition-all"
                      placeholder="天数"
                      min="1"
                      required
                    >
                  </div>
                  
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">同行人数</label>
                    <input 
                      type="number" 
                      v-model="customTripForm.travelers"
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary transition-all"
                      placeholder="人数"
                      min="1"
                    >
                  </div>
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">预算 (元)</label>
                  <input 
                    type="number" 
                    v-model="customTripForm.budget"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary transition-all"
                    placeholder="输入预算"
                    min="0"
                    required
                  >
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">兴趣偏好 (可多选)</label>
                  <div class="flex flex-wrap gap-2">
                    <label 
                      v-for="interest in interestOptions" 
                      :key="interest"
                      class="inline-flex items-center px-3 py-1 rounded-full text-sm cursor-pointer transition-all"
                      :class="customTripForm.interests.includes(interest) ? 'bg-primary text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                    >
                      <input 
                        type="checkbox" 
                        :checked="customTripForm.interests.includes(interest)"
                        @change="toggleInterest(interest)"
                        class="sr-only"
                      >
                      {{ interest }}
                    </label>
                  </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">住宿偏好</label>
                    <select 
                      v-model="customTripForm.accommodation"
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary transition-all"
                    >
                      <option value="">请选择</option>
                      <option value="经济型">经济型</option>
                      <option value="舒适型">舒适型</option>
                      <option value="高档型">高档型</option>
                      <option value="特色民宿">特色民宿</option>
                    </select>
                  </div>
                  
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">交通偏好</label>
                    <select 
                      v-model="customTripForm.transportation"
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary transition-all"
                    >
                      <option value="">请选择</option>
                      <option value="飞机">飞机</option>
                      <option value="高铁">高铁</option>
                      <option value="自驾">自驾</option>
                      <option value="公共交通">公共交通</option>
                    </select>
                  </div>
                </div>
                
                <div class="pt-4">
                  <button 
                    type="submit" 
                    class="w-full py-3 rounded-lg bg-primary text-white font-medium transition-all duration-200 hover:bg-primary/90 shadow hover:shadow-md"
                  >
                    <i class="fa fa-magic mr-2"></i>开始智能定制
                  </button>
                </div>
              </form>
            </div>
          </div>
          
          <!-- 智能定制结果展示 -->
          <div v-show="showCustomTripResult" class="p-6">
            <h3 class="text-xl font-bold mb-6 text-gray-800">您的专属旅行计划</h3>
            
            <div v-if="customTripResult" class="space-y-6">
              <div class="bg-primary/5 border border-primary/20 rounded-xl p-5">
                <h4 class="font-bold text-lg mb-3">{{ customTripResult.destination }} {{ customTripResult.duration }}天行程</h4>
                <p class="text-gray-700">{{ customTripResult.recommendation }}</p>
                
                <div class="mt-4 flex flex-wrap gap-3">
                  <span class="bg-white px-3 py-1 rounded-full text-sm text-gray-700 flex items-center">
                    <i class="fa fa-users mr-1"></i>{{ customTripResult.travelers }}人
                  </span>
                  <span class="bg-white px-3 py-1 rounded-full text-sm text-gray-700 flex items-center">
                    <i class="fa fa-money mr-1"></i>预算约¥{{ customTripResult.budget }}
                  </span>
                </div>
              </div>
              
              <div>
                <h4 class="font-bold text-lg mb-4">每日行程安排</h4>
                
                <div class="space-y-4">
                  <div 
                    v-for="day in customTripResult.days" 
                    :key="day.day"
                    class="bg-white border rounded-xl overflow-hidden shadow-sm transition-all duration-200 hover:shadow"
                  >
                    <div class="bg-primary text-white py-2 px-4 font-medium">
                      第{{ day.day }}天
                    </div>
                    <div class="p-4">
                      <div class="space-y-3">
                        <div class="flex">
                          <div class="w-20 text-gray-500 font-medium">上午</div>
                          <div class="flex-1">{{ day.morning }}</div>
                        </div>
                        <div class="flex">
                          <div class="w-20 text-gray-500 font-medium">下午</div>
                          <div class="flex-1">{{ day.afternoon }}</div>
                        </div>
                        <div class="flex">
                          <div class="w-20 text-gray-500 font-medium">晚上</div>
                          <div class="flex-1">{{ day.evening }}</div>
                        </div>
                        <div class="flex pt-2 border-t">
                          <div class="w-20 text-gray-500 font-medium">住宿</div>
                          <div class="flex-1">{{ day.accommodation }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="flex space-x-4">
                <button 
                  class="flex-1 py-3 rounded-lg bg-primary text-white font-medium transition-all duration-200 hover:bg-primary/90 shadow hover:shadow-md"
                >
                  <i class="fa fa-calendar-plus-o mr-2"></i>保存行程
                </button>
                <button 
                  class="py-3 px-4 rounded-lg border border-gray-300 text-gray-700 font-medium transition-all duration-200 hover:bg-gray-50"
                  @click="showCustomTripResult = false"
                >
                  <i class="fa fa-refresh mr-2"></i>重新定制
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 支付弹窗 -->
    <div v-if="showPaymentModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" @click="showPaymentModal = false">
      <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-6" @click.stop>
        <h3 class="text-xl font-bold mb-4 text-center">确认支付</h3>
        
        <div class="mb-6">
          <div v-if="selectedPackage" class="space-y-2">
            <div class="flex justify-between py-2 border-b">
              <span class="text-gray-600">商品</span>
              <span class="font-medium">{{ selectedPackage.name }}</span>
            </div>
            <div class="flex justify-between py-2 border-b">
              <span class="text-gray-600">时长</span>
              <span>{{ selectedPackage.period }}天</span>
            </div>
            <div class="flex justify-between py-2 border-b font-medium">
              <span>应付金额</span>
              <span class="text-primary">¥{{ selectedPackage.price }}</span>
            </div>
          </div>
          
          <div v-else-if="selectedAmount" class="space-y-2">
            <div class="flex justify-between py-2 border-b">
              <span class="text-gray-600">充值金额</span>
              <span class="font-medium">¥{{ selectedAmount }}</span>
            </div>
            <div class="flex justify-between py-2 border-b font-medium">
              <span>应付金额</span>
              <span class="text-primary">¥{{ selectedAmount }}</span>
            </div>
          </div>
        </div>
        
        <div class="space-y-3">
          <button 
            class="w-full py-3 rounded-lg bg-primary text-white font-medium transition-all duration-200 hover:bg-primary/90"
            @click="handlePayment"
          >
            确认支付
          </button>
          <button 
            class="w-full py-3 rounded-lg border border-gray-300 text-gray-700 font-medium transition-all duration-200 hover:bg-gray-50"
            @click="showPaymentModal = false"
          >
            取消
          </button>
        </div>
      </div>
    </div>
    
    <!-- 订单成功弹窗 -->
    <div v-if="showOrderSuccessModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" @click="showOrderSuccessModal = false">
      <div class="bg-white rounded-2xl shadow-2xl w-full max-w-sm p-6 text-center" @click.stop>
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-check text-green-500 text-2xl"></i>
        </div>
        
        <h3 class="text-xl font-bold mb-2">操作成功</h3>
        <p class="text-gray-600 mb-6">
          {{ selectedPackage ? '会员开通成功！' : '账户充值成功！' }}
        </p>
        
        <button 
          class="w-full py-3 rounded-lg bg-primary text-white font-medium transition-all duration-200 hover:bg-primary/90"
          @click="showOrderSuccessModal = false"
        >
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 自定义样式 */
.user-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.member-card {
  transition: all 0.3s ease;
}

.member-card:hover {
  transform: translateY(-5px);
}
</style>